<template>
  <el-form-item :rules="item.rule" :label="item.label" :prop="item.prop">
    <div class="mix">
      <div class="valueRange">
        <el-input
          :placeholder="
            item.startPlaceholder === undefined
              ? '请输入'
              : item.startPlaceholder
          "
          v-model="formData[item.prop][0]"
          @change="changer"
          :clearable="item.clearable === undefined ? true : item.clearable"
        >
          <template slot="prepend" v-if="item.prepend">{{
            item.prepend
          }}</template>
          <template slot="append" v-if="item.append">{{
            item.append
          }}</template>
        </el-input>
      </div>
      <div class="valueRange">
        <div class="segmentation">
          <div></div>
        </div>
      </div>
      <div class="valueRange">
        <el-input
          :placeholder="
            item.endPlaceholder === undefined ? '请输入' : item.endPlaceholder
          "
          v-model="formData[item.prop][1]"
          @change="changer"
          :clearable="item.clearable === undefined ? true : item.clearable"
        >
          <template slot="prepend" v-if="item.prepend">{{
            item.prepend
          }}</template>
          <template slot="append" v-if="item.append">{{
            item.append
          }}</template>
        </el-input>
      </div>
    </div>
  </el-form-item>
</template>

<script>
export default {
  name: "inputRangeCom",
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  methods: {
    changer() {
      if (this.item.change) {
        this.item.change(
          this.formData[this.item.prop][0],
          this.formData[this.item.prop][1]
        );
      }
    }
  }
};
</script>

<style scoped lang="scss">
.mix {
  display: flex;
}

.mix .valueRange:nth-child(1) {
  padding-right: 0 !important;
  width: calc((100% - 32px) / 2);
}

.mix .valueRange:nth-child(2) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 32px;
}

.mix .valueRange:nth-child(3) {
  padding-left: 0 !important;
  width: calc((100% - 32px) / 2);
}

.segmentation {
  height: 32px;
  width: 32px;
  padding-right: 0;
  padding-left: 0;
  color: #979797;
  border-top: 1px solid #c0c4cc;
  border-bottom: 1px solid #c0c4cc;
  background-color: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.segmentation div {
  width: 30%;
  height: 1px;
  background-color: #979797;
}
</style>
